import React from "react";

export default class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      msg: "这是父组件中的消息",
    };
  }
  render() {
    return (
      <h1>
        父组件
        <button onClick={this.changeMsg}>修改msg</button>
        <hr />
        <Son pmsg={this.state.msg}></Son>
      </h1>
    );
  }
  changeMsg = () => {
    this.setState({
      msg: "1213",
    });
  };
}

class Son extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      msg: 1,
    };
  }
  render() {
    return <h3>子组件--{this.props.pmsg}</h3>;
  }
  // 组件将要接受新的props属性值的钩子
  // 当子组件第一次渲染到页面上的时候，第一次不会被触发
  // 只有父组件通过事件修改了数据之后才会触发钩子函数
  componentWillReceiveProps(nextProps) {
    console.log("被触发了");
    console.log(this.props.pmsg); //是上一次的数据
    console.log(nextProps.pmsg);
  }
}
